.article
  margin: block-margin 0
  border-bottom: 1px solid color-border

.article-inner
  margin-bottom: 15px
  overflow: hidden

.article-meta
  clearfix()
  a
    @extend $link
    color: color-grey

.article-date
  float: left

.article-category
  float: left
  margin-left: 8px
  color: color-grey
  &:before
    content: "\2022"
  span
    margin-left: 8px

.article-category-link
  margin-left: 8px

.article-comment-link-wrap
  float: left
  margin-left: 8px
  color: color-grey
  &:before
    content: "\2022"

.article-comment-link
  margin-left: 8px

.article-header
  margin-bottom: 10px

.article-title
  font-size: 2em
  font-weight: 700
  line-height: line-height-title
a.article-title
  @extend $link

.article-entry
  @extend $base-style
  clearfix()
  color: color-default
  padding: 0
  p, table
    line-height: line-height
    margin: line-height 0
  h1, h2, h3, h4, h5, h6
    font-weight: 600
    line-height: 1.4em
    margin: line-height-title 0
  a
    @extend $link-highlight
  ul, ol, dl
    margin-top: line-height
    margin-bottom: line-height
  img, video
    max-width: 100%
    height: auto
    display: block
    margin: auto
  iframe
    border: none
  table
    width: 100%
    border-collapse: collapse
    border-spacing: 0
  th
    font-weight: 600
    border-bottom: 3px solid color-border
    padding-bottom: 0.5em
  td
    border-bottom: 1px solid color-border
    padding: 10px 0
  blockquote
    font-family: font-default
    font-size: 1.4em
    margin: line-height 20px
    text-align: center
    footer
      font-size: font-size
      margin: line-height 0
      font-family: font-sans
      cite
        &:before
          content: "—"
          padding: 0 0.5em
  .pullquote
    text-align: left
    width: 45%
    margin: 0
    &.left
      margin-left: 0.5em
      margin-right: 1em
    &.right
      margin-right: 0.5em
      margin-left: 1em
  .caption
    color: color-grey
    display: block
    font-size: 0.9em
    margin-top: 0.5em
    position: relative
    text-align: center
  // http://webdesignerwall.com/tutorials/css-elastic-videos
  .video-container
    position: relative
    padding-top: (9 / 16 * 100)% // 16:9 ratio
    height: 0
    overflow: hidden
    iframe, object, embed
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      margin-top: 0

.article-more-link a
  @extend $link
  color: color-grey
  border-bottom-color: color-grey

.article-footer
  clearfix()
  font-size: 0.85em
  padding: line-height 0
  line-height: line-height
  margin: 0
  a
    color: color-grey
    text-decoration: none
    &:hover
      color: color-default

.article-tag-list-item
  float: left
  margin-right: 10px

.article-tag-list-link
  &:before
    content: "#"

#article-nav
  clearfix()
  position: relative
  margin: 20px 0

.article-nav-link-wrap
  text-decoration: none
  text-shadow: 0 1px #fff
  color: color-grey
  box-sizing: border-box
  text-align: center
  display: block
  &:hover
    color: color-default
  @media mq-normal
    width: 50%
    margin-top: 0
    margin-top: block-margin

#article-nav-newer
  float: left
  text-align: left

#article-nav-older
  float: right
  text-align: right

.article-nav-caption
  text-transform: uppercase
  letter-spacing: 2px
  color: color-border
  line-height: 1em
  font-weight: 600
  #article-nav-newer &
    margin-right: -2px

.article-nav-title
  font-size: 0.85em
  line-height: line-height
  margin-top: 0.5em

.article-gallery
  background: #000
  position: relative

.article-gallery-photos
  position: relative
  overflow: hidden

.article-gallery-img
  display: none
  max-width: 100%
  &:first-child
    display: block
  &.loaded
    position: absolute
    display: block
  img
    display: block
    max-width: 100%
    margin: 0 auto

.article-toc
  display: none
  position: fixed
  left: 50%
  top: 110px
  font-size: 0.9em
  width: 260px
  margin-left: 400px
  padding-left: 20px
  overflow-y: auto
  line-height: line-height
  max-height: 32 * 0.9 * line-height
  h3
    font-weight: bold
    margin-left: 20px
  .toc-item
    list-style: none
    margin-left: 20px
    a
      color: black
      text-decoration: none
  @media mq-large
    display: block